@tooltip-prefix-cls: ~"@{css-prefix}tooltip";
@border-var: "border-top-color";
.e-tooltip{
  position: relative;
  &:hover .tip-content{
    display: block;
  }
}
.bg--light .tip-content{
  background-color: @color-functional-white;
  color:#555555;
  box-shadow: 0 0 10px 0 @color-shadow2;
}
.tip-content{
  display: none;
  padding: 3px 10px;
  background-color: @color-complementary-24;
  color: @color-functional-white;
  position: absolute;
  width: auto;
  min-width: 80px;
  max-width: 350px;
  // bottom: 0;
  border-radius: 2px;
  z-index: 2000;
  word-wrap:break-word;
  word-break:break-all;
  .arrow{
    width: 0;
    height: 0;
    border: 6px solid transparent;
    position: absolute;
    // bottom: -12px;
  }
}
.place--top-right{
  .tip-content{
    right: 0;
    .arrow{
      right: 3px;
      bottom: -12px;
      border-top-color: @color-complementary-24;
    }
  }
  &.bg--light{
    .arrow{
      border-top-color: @color-complementary-10;
    }
  }
}
.place--top-left{
  .tip-content{
    left: 0;
    .arrow{
      left: 3px;
      bottom: -12px;
      border-top-color: @color-complementary-24;
    }
  }
  &.bg--light{
    .arrow{
      border-top-color: @color-complementary-10;
    }
  }
}
.place--top{
  .tip-content{
    .arrow{
      bottom: -12px;
      border-top-color: @color-complementary-24;
    }
  }
  &.bg--light{
    .arrow{
      border-top-color: @color-complementary-10;
    }
  }
}
.place--left-top{
  .tip-content{
    top: 0;
    .arrow{
      right: -12px;
      border-left-color: @color-complementary-24;
    }
  }
  &.bg--light{
    .arrow{
      border-left-color:@color-complementary-10;
    }
  }
}
.place--left{
  .tip-content{
    .arrow{
      right: -12px;
      border-left-color: @color-complementary-24;
    }
  }
  &.bg--light{
    .arrow{
      border-left-color:@color-complementary-10;
    }
  }
}
.place--left-bottom{
  .tip-content{
    bottom: 0;
    .arrow{
      right: -12px;
      bottom: 3px;
      border-left-color: @color-complementary-24;
    }
  }
  &.bg--light{
    .arrow{
      border-left-color:@color-complementary-10;
    }
  }
}
.place--bottom-left{
  .tip-content{
    left: 0;
    .arrow{
      left: 3px;
      top: -12px;
      border-bottom-color: @color-complementary-24;
    }
  }
  &.bg--light{
    .arrow{
      border-bottom-color: @color-complementary-10;
    }
  }
}
.place--bottom{
  .tip-content{
    .arrow{
      top: -12px;
      border-bottom-color: @color-complementary-24;
    }
  }
  &.bg--light{
    .arrow{
      border-bottom-color: @color-complementary-10;
    }
  }
}
.place--bottom-right{
  .tip-content{
    right: 0;
    .arrow{
      right: 3px;
      top: -12px;
      border-bottom-color: @color-complementary-24;
    }
  }
  &.bg--light{
    .arrow{
      border-bottom-color: @color-complementary-10;
    }
  }
}
.place--right-top{
  .tip-content{
    .arrow{
      left: -12px;
      border-right-color: @color-complementary-24;
    }
  }
  &.bg--light{
    .arrow{
      border-right-color: @color-complementary-10;
    }
  }
}
.place--right{
  .tip-content{
    .arrow{
      left: -12px;
      border-right-color: @color-complementary-24;
    }
  }
  &.bg--light{
    .arrow{
      border-right-color: @color-complementary-10;
    }
  }
}
.place--right-bottom{
  .tip-content{
    bottom: 0;
    .arrow{
      left: -12px;
      bottom: 3px;
      border-right-color: @color-complementary-24;
    }
  }
  &.bg--light{
    .arrow{
      border-right-color: @color-complementary-10;
    }
  }
}